<template>
    <article class="proster">
        <div class="poster-box" v-show="!isImg">
            <img :src="imgUrl" :width="width" :height="height" />
        </div>
        <section class="canvas_box" id="mycanvas" ref="mycanvas" v-show="isImg">
            <!-- <section class="poster-banner">
                <p>{{ getActivity.title }}</p>
                <img src="../images/poster-banner.png" />
            </section> -->
            <section class="poster-discount">
                <p>
                    仅用<mark>{{ getActivity.buyingPrice }}元</mark>秒杀<mark>{{ getActivity.originalPrice }}元</mark>车辆养护大礼包
                </p>
            </section>
            <section class="poster-bag">
                <ul>
                    <li v-for="(v, k) in getActivity.itemsList" :key="k">
                        <label>项目{{ toChinesNum(k + 1) }}</label>
                        <div>
                            <span>{{ v.itemName }}{{ v.unit }}</span>
                            <span><var>{{ v.total }}</var>元</span>
                        </div>
                    </li>
                    <li class="packsbag">
                        {{ getActivity.introduction }}
                    </li>
                </ul>
            </section>
            <section class="poster-personal">
                <ul>
                    <li><img :src="getActivity.headImgUrl" alt="" /></li>
                    <li>
                        <p>{{ getActivity.userName || "未知" }}</p>
                        <p>诚邀您获取大礼包</p>
                    </li>
                    <li>
                        <div id="giftbag">
                            <vue-qr :text="qrcodeImgUrl" :size="200" :correctLevel="0" :margin="3"></vue-qr>
                        </div>
                    </li>
                </ul>
            </section>
        </section>
    </article>
</template>

<script>
    import { mapGetters } from "vuex";
    import VueQr from "vue-qr";
    import html2canvas from "html2canvas";
    import baseUrl from "@/api/baseUrl";
    export default {
        components: {
            VueQr,
        },
        data() {
            return {
                qrcodeImgUrl: window.location.href,
                isImg: true,
                imgUrl: require("../images/logo.png"),
                width: 0,
                height: 0,
            };
        },
        computed: {
            ...mapGetters([
                // 使用辅助函数 mapGetters
                "getActivity", // 映射 this.perStatus为 this.$store.getters.perStatus
            ]),
        },
        created() {
            this.qrcodeImgUrl =
                baseUrl.ownUrl +
                "app/wechatOauth/" +
                this.getActivity.id +
                "?shareId=" +
                this.getActivity.userId;
            setTimeout(() => this.saveImg(), 1000);
        },
        methods: {
            async saveImg() {
                window.pageYoffset = 0;
                document.documentElement.scrollTop = 0;
                document.body.scrollTop = 0;
                // 先获取你要转换为img的dom节点
                var node = this.$refs.mycanvas; //传入的id名称
                var width = node.offsetWidth; //dom宽
                var height = node.offsetHeight; //dom高
                this.width = width;
                this.height = height;
                var scale = 2; //放大倍数 这个相当于清晰度 调大一点更清晰一点
                let canvas = await html2canvas(node, {
                    width: width,
                    heigth: height,
                    backgroundColor: "#d41616", //背景颜色 为null是透明
                    dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
                    scale: scale,
                    X: 0,
                    Y: 0,
                    scrollX: -3, //如果左边多个白边 设置该偏移-3 或者更多
                    scrollY: 0,
                    useCORS: true, //是否使用CORS从服务器加载图像 !!!
                    allowTaint: true, //是否允许跨域图像污染画布  !!!
                    async: true,
                });
                this.imgUrl = await canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式
            },
            toChinesNum(num) {
                let changeNum = [
                    "零",
                    "一",
                    "二",
                    "三",
                    "四",
                    "五",
                    "六",
                    "七",
                    "八",
                    "九",
                ]; //changeNum[0] = "零"
                let unit = ["", "十", "百", "千", "万"];
                num = parseInt(num);
                let getWan = (temp) => {
                    let strArr = temp.toString().split("").reverse();
                    let newNum = "";
                    for (var i = 0; i < strArr.length; i++) {
                        newNum =
                            (i == 0 && strArr[i] == 0 ?
                                "" :
                                i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ?
                                "" :
                                changeNum[strArr[i]] +
                                (strArr[i] == 0 ? unit[0] : unit[i])) + newNum;
                    }
                    return newNum;
                };
                let overWan = Math.floor(num / 10000);
                let noWan = num % 10000;
                if (noWan.toString().length < 4) noWan = "0" + noWan;
                return overWan ?
                    getWan(overWan) + "万" + getWan(noWan) :
                    getWan(num);
            },
        },
        watch: {
            imgUrl: {
                //深度监听，可监听到对象、数组的变化
                handler(val, oldVal) {
                    console.warn("监听生成海报：", val, oldVal);
                    this.isImg = false;
                },
                deep: true, //true 深度监听
            },
        },
    };
</script>

<style lang="less" scoped>
    @import url("@/styles/poster.less");
</style>
